<template>
  <div class="divVideo">
    <video ref="videoPlayer"  id="video"  poster="../assets/787.jpg">
      <source
        src="../assets/viode1.mp4"
        type="video/mp4"
      />
    </video>
  </div>
</template>

<script>
export default {
  name: "VideoPlayer",
  data() {
    return {
      player: null
    };
  },
  mounted() {
    // 播放参数
    let options = {
      controls: false, // 是否显示底部控制栏
      preload: "auto", // 加载<video>标签后是否加载视频
      autoplay: "muted", // 静音播放
      // playbackRates: [0.5, 1, 1.5, 2],// 倍速播放
      width:600,
      
      controlBar: {
        // 自定义按钮的位置
        children: [
         
        ]
      }
    };
    this.player = this.$video(this.$refs.videoPlayer, options,function onPlayerReady() {
      console.log('onPlayerReady', this);
    });
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose()
    }
  },
  methods: {
  }
};
</script>

<style scoped>

.divVideo{
    position:relative;
    width:100%;
    height:0;
    padding-bottom:40%; 
   
}
video{
    position:absolute;
    left:1%;
    top:4px;
    width:98%;
    height:289px;
    object-fit: fill;
}

</style>

